<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>工程主页</title>
	<meta name="renderer" content="webkit|ie-comp|ie-stand">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport"
		content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">

	<script id="frame" src="../../../assets/js/common/frame.js"></script>

	<style>
		[v-cloak] {
			display: none;
		}

		.visual-editor {
			width: 800px;
			position: absolute;
			right: 0px;
			top: 10px;
			background-color: rgba(234, 234, 234, 0.8);
			color: #fff;
			padding: 20px;
			border-radius: 10px;
			height: 500px;
			overflow: scroll;
			border: 1px solid #ddd;
		}

		.container-panel {
			width: 500px;
		}

		.el-form--inline .el-form-item__label {
			color: #8b8ae8;
			font-weight: 100;
		}

		.el-form--inline .el-form-item {
			width: 100%;
		}

		.el-switch__label.is-active {
			color: #858585 !important;
			font-size: 16px !important;
		}

		h3 {
			margin-bottom: 30px;
			color: #333333;
		}
	</style>
</head>


<body>
	<div id="template" v-cloak>
		<div class="page-title">
			页面标题
		</div>
		<div class="page-module">
			<div class="page-panel">
				<el-input id="input1" v-model="input1"></el-input>
			</div>
		</div>


		<div class="page-module">
			<div class="page-panel">
				<table id="radio_config_base">
					<thead>
						<tr>
							<th>参数</th>
							<th>说明</th>
							<th>类型</th>
							<th>可选值</th>
							<th>默认值</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>type</td>
							<td>类型</td>
							<td>string</td>
							<td>text, textarea</td>
							<td>text</td>
						</tr>
						<!-- <tr>
							<td>value / v-model</td>
							<td>绑定值</td>
							<td>string / number</td>
							<td>—</td>
							<td>—</td>
						</tr> -->
						<tr>
							<td>maxlength</td>
							<td>原生属性，最大输入长度</td>
							<td>number</td>
							<td>—</td>
							<td>—</td>
						</tr>
						<tr>
							<td>minlength</td>
							<td>原生属性，最小输入长度</td>
							<td>number</td>
							<td>—</td>
							<td>—</td>
						</tr>
						<tr>
							<td>show-word-limit</td>
							<td>是否显示输入字数统计，只在 <code>type = "text"</code> 或 <code>type = "textarea"</code> 时有效</td>
							<td>boolean</td>
							<td>—</td>
							<td>false</td>
						</tr>
						<tr>
							<td>placeholder</td>
							<td>输入框占位文本</td>
							<td>string</td>
							<td>—</td>
							<td>—</td>
						</tr>
						<tr>
							<td>clearable</td>
							<td>是否可清空</td>
							<td>boolean</td>
							<td>—</td>
							<td>false</td>
						</tr>
						<tr>
							<td>show-password</td>
							<td>是否显示切换密码图标</td>
							<td>boolean</td>
							<td>—</td>
							<td>false</td>
						</tr>
						<tr>
							<td>disabled</td>
							<td>禁用</td>
							<td>boolean</td>
							<td>—</td>
							<td>false</td>
						</tr>
						<tr>
							<td>size</td>
							<td>输入框尺寸，只在 <code>type!="textarea"</code> 时有效</td>
							<td>string</td>
							<td>medium / small / mini</td>
							<td>—</td>
						</tr>
						<tr>
							<td>prefix-icon</td>
							<td>输入框头部图标</td>
							<td>string</td>
							<td>—</td>
							<td>—</td>
						</tr>
						<tr>
							<td>suffix-icon</td>
							<td>输入框尾部图标</td>
							<td>string</td>
							<td>—</td>
							<td>—</td>
						</tr>
						<tr>
							<td>rows</td>
							<td>输入框行数，只对 <code>type="textarea"</code> 有效</td>
							<td>number</td>
							<td>—</td>
							<td>2</td>
						</tr>
						<tr>
							<td>autosize</td>
							<td>自适应内容高度，只对 <code>type="textarea"</code> 有效，可传入对象，如，{ minRows: 2, maxRows: 6 }</td>
							<td>boolean / object</td>
							<td>—</td>
							<td>false</td>
						</tr>
						<tr>
							<td>autocomplete</td>
							<td>原生属性，自动补全</td>
							<td>string</td>
							<td>on, off</td>
							<td>off</td>
						</tr>
						<tr>
							<td>auto-complete</td>
							<td>下个主版本弃用</td>
							<td>string</td>
							<td>on, off</td>
							<td>off</td>
						</tr>
						<tr>
							<td>name</td>
							<td>原生属性</td>
							<td>string</td>
							<td>—</td>
							<td>—</td>
						</tr>
						<tr>
							<td>readonly</td>
							<td>原生属性，是否只读</td>
							<td>boolean</td>
							<td>—</td>
							<td>false</td>
						</tr>
						<tr>
							<td>max</td>
							<td>原生属性，设置最大值</td>
							<td>—</td>
							<td>—</td>
							<td>—</td>
						</tr>
						<tr>
							<td>min</td>
							<td>原生属性，设置最小值</td>
							<td>—</td>
							<td>—</td>
							<td>—</td>
						</tr>
						<tr>
							<td>step</td>
							<td>原生属性，设置输入字段的合法数字间隔</td>
							<td>—</td>
							<td>—</td>
							<td>—</td>
						</tr>
						<tr>
							<td>resize</td>
							<td>控制是否能被用户缩放</td>
							<td>string</td>
							<td>none, both, horizontal, vertical</td>
							<td>—</td>
						</tr>
						<tr>
							<td>autofocus</td>
							<td>原生属性，自动获取焦点</td>
							<td>boolean</td>
							<td>true, false</td>
							<td>false</td>
						</tr>
						<tr>
							<td>form</td>
							<td>原生属性</td>
							<td>string</td>
							<td>—</td>
							<td>—</td>
						</tr>
						<tr>
							<td>label</td>
							<td>输入框关联的label文字</td>
							<td>string</td>
							<td>—</td>
							<td>—</td>
						</tr>
						<tr>
							<td>tabindex</td>
							<td>输入框的tabindex</td>
							<td>string</td>
							<td>-</td>
							<td>-</td>
						</tr>
						<tr>
							<td>validate-event</td>
							<td>输入时是否触发表单的校验</td>
							<td>boolean</td>
							<td>-</td>
							<td>true</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>


		<div id="visual_editor" class="visual-editor">
			<div class="container-panel">

				<h3> Input Attributes</h3>
				<el-form :inline="true" :model="form" ref="form1" class="form-inline">
					<template v-for="w in widget.list">

						<el-form-item :label="w.param+'：'">
							<template v-if="w.type==1">
								<el-popover placement="right-end" title="info" width="200" trigger="hover"
									:content="w.info">
									<el-input slot="reference" v-model="w.value" :placeholder="w.info" clearable>
									</el-input>
									</el-button>

								</el-popover>
							</template>

							<template v-if="w.type==2">
								<el-popover placement="right-end" title="info" width="200" trigger="hover"
									:content="w.info">
									<el-switch slot="reference" v-model="w.value" active-text="true"
										inactive-text="false">
									</el-switch>


								</el-popover>
							</template>


							<template v-if="w.type==3">
								<el-popover placement="right-end" title="info" width="200" trigger="hover"
									:content="w.info">
									<el-radio-group v-model="w.value" slot="reference">
										<template v-for="item in w.list">
											<el-radio :label="item">{{item}}</el-radio>
										</template>
										</el-checkbox-group>

								</el-popover>
							</template>
						</el-form-item>



					</template>

					<el-input type="textarea" :rows="20" v-model="code.config">
					</el-input>


					<el-button type="primary" size="mini" @click="create_config">生成文件</el-button>
				</el-form>



			</div>
		</div>
	</div>

</body>

</html>
<script src="../../../lib/element/element.js"></script>


<script>
	//init_js("../../assets/js/views/demo/template.js");

	init_resource({
		js_url: "../../../assets/js/views/demo/visual_tool/ele.js",
		next_css: '../../../assets/css/common/page.css',
		//need_css: true //选加，无则默认不加载当前页css
	});
</script>